<template>
  <div class="list-page">
    <Row>
      <div class="toolbar">
        <div>
          <router-link :to="{ path: '/agents/add' }">
            <Button
              type="primary"
              icon="md-add"
              >新增管理员
            </Button>
          </router-link>
        </div>
        <CompanySelector
          style="width: 300px; margin-right: 10px"
          :tagCount="100"
          :companyId="bloc.form.companyId"
          @on-change="(value) => (bloc.form.companyId = value)"
          v-if="Validation.isRootCompany"
        ></CompanySelector>
        <RoleSelectorSingle
          style="width: 180px; margin-right: 10px"
          :tagCount="1"
          :roleId="Number(bloc.form.roleId)"
          @on-change="(value) => (bloc.form.roleId = value)"
        ></RoleSelectorSingle>
        <Input
          placeholder="姓名"
          v-model="bloc.form.userName"
          style="width: 180px; margin-right: 10px"
        />
        <Input
          placeholder="手机"
          v-model="bloc.form.phone"
          style="width: 180px; margin-right: 10px"
        />
        <Input
          placeholder="登录账号"
          v-model="bloc.form.email"
          style="width: 180px; margin-right: 10px"
        />
        <DatePicker
          type="daterange"
          placeholder="添加时间"
          format="yyyy/MM/dd"
          v-model="bloc.form.date"
          :editable="false"
          style="width: 200px; margin-right: 10px"
        ></DatePicker>
        <Button
          type="primary"
          icon="ios-search"
          style="margin-right: 10px"
          size="default"
          @click="bloc.load(1, 15)"
          >查询
        </Button>
        <Button
          icon="md-refresh"
          style="margin-right: 10px"
          size="default"
          @click="bloc.reset()"
          >重置</Button
        >
      </div>
    </Row>
    <Row>
      <Table
        border
        :loading="bloc.loading"
        :columns="columns"
        highlight-row
        :data="bloc.paged.items"
      >
        <template slot-scope="{ row }" slot="action">
          <div style="white-space: nowrap">
            <Button
              size="small"
              @click="specific(row)"
              type="info"
              v-if="Validation.check(Resources.ACCOUNT_UPDATE)"
            >
              经销商
            </Button>
            <Button
              size="small"
              @click="modifyItem(row)"
              type="info"
              v-if="Validation.check(Resources.ACCOUNT_UPDATE)"
            >
              编辑
            </Button>
            <Button
              size="small"
              @click="bloc.changePsdModal(row.id)"
              v-if="Validation.check(Resources.ACCOUNT_UPDATE_USER_PASSWORD)"
              type="info"
            >
              修改密码
            </Button>
            <Button
              size="small"
              @click="removeItem(row)"
              type="warning"
              v-if="Validation.check(Resources.ACCOUNT_DELETE)"
            >
              删除
            </Button>
          </div>
        </template>
        <slot name="footer" slot="footer">
          <Page
            show-elevator
            show-total
            show-sizer
            :total="bloc.paged.itemCount"
            :current="bloc.paged.pageIndex"
            :page-size="bloc.paged.pageSize"
            :page-size-opts="[15, 30, 50, 100]"
            @on-change="(val) => bloc.load(val, bloc.paged.pageSize)"
            @on-page-size-change="(val) => bloc.load(bloc.paged.pageIndex, val)"
          />
        </slot>
      </Table>
    </Row>
    <ChangeAccountPwd
      :showPsdModal="bloc.isShowPsdModal"
      :idx="bloc.accountId"
      @savePwdModal="bloc.savePwdModal()"
      @closeModal="bloc.isShowPsdModal = false"
    ></ChangeAccountPwd>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Route } from "vue-router";
import { ListBloc } from "@/view/agents/ListBloc";
import { Account } from "@/base/model/Account";
import { formatDate } from "@/base/util/Dates";
import CompanySelector from "@/component/CompanySelector.vue";
import ChangeAccountPwd from "@/component/ChangeAccountPwd.vue";
import RoleSelectorSingle from "@/component/RoleSelectorSingle.vue";
import { Validation } from "@/base/Validation";
import { Resources } from "@/base/Resources";

const columns = (bloc: ListBloc) => [
  {
    title: "所属品牌商",
    render: (h: any, params: any) => {
      return h("span", {
        domProps: {
          innerText: bloc.getCompanyName(params.row.companyId),
        },
      });
    },
    align: "left",
    minWidth: 200,
    tooltip: true,
  },
  {
    title: "姓名",
    key: "userName",
    align: "left",
    width: 100,
    tooltip: true,
  },
  {
    title: "登录账号",
    key: "email",
    align: "left",
    minWidth: 150,
    tooltip: true,
  },
  {
    title: "手机",
    key: "phone",
    align: "left",
    minWidth: 120,
    tooltip: true,
  },
  {
    title: "角色",
    render: (h: any, params: any) => {
      return h("span", {
        domProps: {
          innerText: bloc.getRoleName(params.row.roles),
        },
      });
    },
    align: "left",
    minWidth: 100,
    tooltip: true,
  },
  {
    title: "添加时间",
    render: (h: any, params: any) => {
      return h("span", {
        domProps: {
          innerText: formatDate(
            new Date(params.row.registerDate),
            "yyyy-MM-dd hh:mm:ss"
          ),
        },
      });
    },
    width: 160,
    align: "left",
    tooltip: true,
  },
  {
    title: "最后登录",
    render: (h: any, params: any) => {
      return h("span", {
        domProps: {
          innerText: formatDate(
            new Date(params.row.loginDate),
            "yyyy-MM-dd hh:mm:ss"
          ),
        },
      });
    },
    width: 160,
    align: "left",
    tooltip: true,
  },
  {
    title: "操作",
    slot: "action",
    width: 250, 
    align: "left",
    fixed: "right",
  },
];

@Component({
  components: {
    ChangeAccountPwd,
    CompanySelector,
    RoleSelectorSingle,
  },
})
export default class extends Vue {
  Validation = Validation;
  Resources = Resources;

  beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
    next((vm) => {
      vm.bloc
        .load(vm.bloc.paged.pageIndex, vm.bloc.paged.pageSize)
        .catch((e) => {
          vm.$Message.error("操作错误");
        });
    });
  }

  bloc: ListBloc = new ListBloc();
  columns = columns(this.bloc);

  removeItem(dataItem: Account) {
    this.$Modal.confirm({
      title: "提示",
      content: "确认删除后将无法恢复！还要继续吗？",
      okText: "删除",
      cancelText: "取消",
      onOk: () => {
        this.bloc
          .removeItem(dataItem)
          .then((value) => {
            this.bloc.load(this.bloc.paged.pageIndex, this.bloc.paged.pageSize);
          })
          .then(() => {
            this.$Message.success("删除成功");
          })
          .catch((e) => {
            this.$Message.error("删除失败");
          });
      },
    });
  }

  modifyItem(dataItem: Account) {
    this.$router.replace(`/agents/${dataItem.id}`);
  }

  // specific(dataItem: Account) {
  //   this.$router.replace(`/agents/agent/${dataItem.id}`);
  // }

  specific(dataItem: Account) {
      this.$router.push({path: `/agents/agent/${dataItem.id}`});
  }
}
</script>

<style lang="less">
.list-query-box {
  display: flex;
}
</style>
